<template>
  <div class="illegalPark" :class="{overhide: selectRoadShow}">
    <div>
      <div class="illegalPark-container" v-if="show">
        <div class="border-line flex-line bg-white">
          <span class="name-space">号码号牌<i class="require"></i></span>
          <cube-input
            v-model="submitData.licensePlate"
            placeholder="请输入"
            style="width: 250px;"
            class="pr20"
          ></cube-input>
        </div>
        <div class="border-line flex-line bg-white">
          <span class="name-space">号牌种类<i class="require"></i></span>
          <picker-common
            :selectData.sync="carCardType"
            :pickerList="carType"
            :title="'号牌种类'"
            :selectVal="carCardType"
            :alias="{ value: 'code', text: 'name' }"
          ></picker-common>
        </div>
        <div class="border-line flex-line bg-white">
          <span class="name-space">违法时间<i class="require"></i></span>
          <div
            @click="openTimePicker"
            class="event-time-select flex-line"
            style="width: 200px;"
          >
            <cube-input
              v-model="submitData.illegalTime"
              placeholder="请选择"
              :disabled="true"
            ></cube-input>
            <i class="iconarrow_right"></i>
          </div>
        </div>
        <div class="border-line flex-line bg-white">
          <span class="name-space">告知单号<i class="require"></i></span>
          <cube-input
            v-model="submitData.informBill"
            placeholder="请输入"
            style="width: 250px;"
            class="pr20"
             maxlength="20"
          ></cube-input>
        </div>
        <div class="border-line flex-line bg-white">
          <span class="name-space">承办人<i class="require"></i></span>
          <cube-input
            v-model="submitData.agentMainName"
            style="width: 250px;"
            class="pr20"
            :disabled="true"
            :readonly="true"
          ></cube-input>
        </div>
        <div class="border-line flex-line bg-white">
          <span class="name-space">承办人2<i class="require"></i></span>
          <picker-common
            :selectData.sync="assMan"
            :pickerList="cbList"
            title="承办人"
            :selectVal="assMan"
            :alias="{ value: 'usercode', text: 'username' }"
          ></picker-common>
        </div>
        <div class="border-line flex-line bg-white">
          <span class="name-space">违法道路<i class="require"></i></span>
          <div class="road-select" @click="getRoad">
            <cube-input
              v-model="submitData.road"
              style="width: 167px;"
              placeholder="请选择"
              ref="roadInput"
              :disabled="true"
              :readonly="true"
            ></cube-input>
            <i class="iconarrow_right"></i>
          </div>
        </div>
        <div class="handle-opinion">
          <p>
            <span>详细地址<i class="require"></i></span>
          </p>
          <cube-textarea
            v-model="submitData.address"
            placeholder="请输入详细地址"
          ></cube-textarea>
        </div>
        <div class="border-line flex-line bg-white">
          <span class="name-space">违法行为<i class="require"></i></span>
          <picker-common
            :selectData.sync="illegalBehavior"
            :pickerList="illegalBehave"
            :title="'违法行为'"
            :selectVal="illegalBehavior"
            :alias="{ value: 'code', text: 'name' }"
          ></picker-common>
        </div>
        <div class="border-line flex-line pr20 bg-white">
          <span class="name-space">侵占盲道</span>
          <cube-switch v-model="submitData.isBlind"></cube-switch>
        </div>
        <div class="border-line flex-line pr20 bg-white">
          <span class="name-space">现场劝改</span>
          <cube-switch v-model="submitData.caseStatus"></cube-switch>
        </div>
        <div class="border-line flex-line pr20 bg-white">
          <span class="name-space">发送短信</span>
          <cube-switch v-model="submitData.isSend"></cube-switch>
        </div>
        <div class="border-line flex-line bg-white">
          <span class="name-space">特殊标记</span>
          <picker-common
            :selectData.sync="specialFlag"
            :pickerList="specialFlagArr"
            title="特殊标记"
            :selectVal="specialFlag"
            :alias="{ value: 'id', text: 'name' }"
          ></picker-common>
        </div>
        <div class="handle-opinion">
          <p>
            <span>备注</span>
          </p>
          <cube-textarea
            v-model="submitData.note"
            placeholder="请输入"
          ></cube-textarea>
        </div>

        <div class="image-upload">
          <p>
            <span>处理图片<i class="require"></i></span>
            <span>(上传个数最少三张，最多五张)</span>
          </p>
          <cube-upload
            ref="upload"
            :max="5"
            v-model="uploadImgs"
            :simultaneous-uploads="1"
          ></cube-upload>
        </div>
      </div>
      <div class="illegalPark-login" v-else>
        <div class="bg-white login-form">
          <span class="name-space">账号:</span>
          <cube-input v-model="userName" placeholder="请输入"></cube-input>
        </div>
        <div class="bg-white login-form">
          <span class="name-space">密码:</span>
          <cube-input
            v-model="password"
            placeholder="请输入"
            :eye="eye"
          ></cube-input>
        </div>
        <div class="login-btn">
          <div @click="clickLogin" class="btn">
            登 录
          </div>
        </div>
      </div>
    </div>

    <div class="road-box" v-show="selectRoadShow">
      <div class="search-input">
        <cube-input
          placeholder="请输入进行搜索"
          ref="roadSearchInput"
          @input="searchRoad"
        ></cube-input>
      </div>
      <div class="box">
        <cube-scroll>
          <ul>
            <li v-for="item in roadSearchList" :key="item.roadcode" @click="handleRoad(item)">
              {{ item.roadname }}
            </li>
          </ul>
        </cube-scroll>
      </div>
      <div class="login-btn">
        <div @click="closeRoad" class="btn">
          关 闭
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { carType, illegalBehave } from "./dataJson";
import { format, valiData } from "@/common/js/utils";
import { uploadFiles } from "@/api/upload.js";
import {
  authUser,
  login,
  get_users,
  get_roads,
  add_case
} from "@/api/eventAPI.js";
export default {
  props: {
    handleType: {
      type: Number,
      default: 0
    }
  },
  components: {
    "picker-common": () => import("@/components/picker-common/picker-common")
  },
  data() {
    return {
      userName: "",
      password: "",
      show: true,
      eye: {
        open: true,
        reverse: false
      },
      sessionInfo: {
        key: "",
        id: ""
      },
      toast: null,
      carType,
      illegalBehave,
      submitData: {
        licensePlate: "浙A", // 号牌号码
        plateType: "", // 号牌种类
        illegalTime: "", // 违法时间（格式：yyyy-MM-dd HH:mm:ss）
        informBill: "", // 抄告单号
        agentMainId: "", // 采集民警1（id）
        agentMainName: "",
        agentLesserId: "", // 采集民警2（id）
        agentLesserName: "",
        roadCode: "", // 道路代码
        road: "",
        address: "", // 详细地址
        illegal: "", // 违法行为
        isBlind: false, //盲道
        caseStatus: false, //劝改
        flag: 0, //特殊标记
        isSend: false, //是否发送短信
        note: "" //备注
      },
      uploadImgs: [],
      carCardType: { id: "", text: "" }, // 车牌类型
      illegalRoad: { id: "", text: "" }, // 违法道路
      illegalBehavior: { id: "", text: "" }, // 违法行为
      assMan: { id: "", text: "" }, // 协办人
      specialFlag: { id: 0, text: "无" }, // 特殊标记
      cbList: [],
      roadList: [],
      specialFlagArr: [
        { id: 0, name: "无" },
        { id: 1, name: "造成事故或后果严重" },
        { id: 2, name: "妨碍公务" },
        { id: 3, name: "拒不改正" }
      ],
      selectRoadShow: false,
      roadSearchList: []
    };
  },
  computed: {
    userInfo() {
      return JSON.parse(window.localStorage.getItem("user"));
    }
  },
  watch: {
    carCardType(n) {
      this.submitData.plateType = n.id;
    },
    assMan(n) {
      this.submitData.agentLesserId = n.id;
      this.submitData.agentLesserName = n.text;
    },
    illegalBehavior(n) {
      this.submitData.illegal = n.id;
    },
    specialFlag(n) {
      this.submitData.flag = n.id;
    }
  },
  mounted() {
    this.checkLogin();
  },
  methods: {
    openTimePicker() {
      if (!this.dateTimePicker) {
        this.dateTimePicker = this.$createDatePicker({
          title: "日期选择",
          min: new Date(2008, 7, 8, 8, 0, 0),
          max: new Date(),
          value: new Date(),
          columnCount: 6,
          onSelect: this.selectHandle
        });
      }
      this.dateTimePicker.show();
    },
    selectHandle(time) {
      this.submitData.illegalTime = format(time, "yyyy-MM-dd hh:mm:ss");
    },
    // 验证登录
    async checkLogin() {
      let res = await authUser(this.userInfo.userId);
      if (res.code === 0) {
        let data = res.data;
        if (data.flag === "0") {
          // 未验证但已登录过的账户，直接重新登录
          if (data.illegalUserName) {
            this.userName = data.illegalUserName;
            this.password = data.illegalUserPasword;
            this.login(0);
          } else {
            // 未登陆过的用户 跳转到登录页·
            this.show = false;
            this.$emit("hideMain", false);
          }
        } else {
          this.submitData.agentMainName = data.illegalUserName;
          this.submitData.agentMainId = data.illegalUserName;
          this.sessionInfo.key = data.sessionKey;
          this.sessionInfo.id = data.sessionId;
          this.userName = data.illegalUserName;
          this.password = data.illegalUserPasword;
          this.getUser();
        }
      } else {
        this.$createToast({
          txt: "违停登录验证失败",
        }).show();
        this.$emit('back')
      }
    },
    async login(type = 1) {
      // type = 0`后台登录
      if (type) {
        this.toast = this.$createToast({
          txt: "登录中...",
          time: 0,
          mask: true
        });
        this.toast.show();
      }
      let res = login(this.userName, this.password, this.userInfo.userId);
      if (type) {
        this.toast.hide();
      }
      if (res.code === 0) {
        if (type) {
          this.$emit("hideMain", true);
          this.show = true;
        }
        this.sessionInfo.key = res.data.sessionKey;
        this.sessionInfo.id = res.data.sessionId;
        this.getUser();
      } else {
        this.$createToast({
          txt: "登录失败",
          type: "error"
        }).show();
      }
    },
    async clickLogin() {
      let param = {
        userName: this.userName,
        password: this.password
      };
      if (
        !valiData.call(
          this,
          {
            userName: { cond: "String($$).length>0", pro: "请输入账号" },
            password: { cond: "String($$).length>0", pro: "请输入密码" }
          },
          param
        )
      ) {
        return false;
      }
      this.login();
    },
    async getUserInfo() {
     let submitData = {}
      submitData.localUserCode = this.userInfo.userId
      submitData.serverUserCode = this.userName
      submitData.sessionKey = this.sessionInfo.key
      submitData.sessionId = this.sessionInfo.id
      return submitData;
    },
    async getUser() {
      let res = await get_users(
        this.userName,
        this.sessionInfo.key,
        this.sessionInfo.id
      );
      if (res.code == 0) {
        // this.cbList = res.data;
        this.cbList = res.data.filter(item => item.usercode !== this.userName);
        // this.vioinfo.agentMainId = this.userName;
        // if(this.sessionInfo.assMan) {
        //   this.vioinfo.agentLesserId = this.sessionInfo.assMan
        // }
      }
    },
    async getRoad() {
      const toast = this.$createToast({
        txt: "获取道路中...",
        time: 0,
        mask: true
      });
      toast.show();
      let res = await get_roads(
        this.userName,
        this.sessionInfo.key,
        this.sessionInfo.id
      );
      toast.hide();
      if (res.code == 0) {
        this.roadList = res.data;
        this.roadSearchList = res.data

        this.$emit("hideMain", false);
        this.selectRoadShow = true;
      }
    },
    closeRoad() {
      this.$emit("hideMain", true, 1);
      this.selectRoadShow = false;
    },
    searchRoad(val) {
      if(!val) {
        this.roadSearchList = this.roadList
        return
      }
      this.roadSearchList = this.roadList.filter(item => item.roadname.includes(val))
    },
    handleRoad(item) {
      this.submitData.road = item.roadname
      this.submitData.roadCode = item.roadcode
      this.$emit("hideMain", true, 1);
      this.selectRoadShow = false;
    }
  }
};
</script>

<style lang="stylus">
.my-report-handle .illegalPark {
  &.overhide {
    overflow hidden
    height 100vh
  }
  .cube-input::after {
    border none
  }
  .pr20 {
    padding-right 20px
  }
  .border-line {
    height 44px
  }
  .event-time-select {
    justify-content flex-start
    .iconarrow_right {
      color #999
    }
    input{
      text-align: right
      width 167px
    }
  }
  .handle-opinion {
    margin-top 0
  }
  &-login {
    .login-form {
      margin-top 12px
      padding 10px
      .name-space {
        font-size 16px
        text-indent 0
      }
      .cube-input input {
        text-align left
        height 40px
        text-indent 10px
        font-size 16px
        border-bottom 1px solid #999
        margin-top 10px
      }
    }
  }
  .login-btn {
    padding 12px
    .btn {
      height: 41px;
      background:rgba(4,48,102,1);
      border-radius:4px;
      text-align center;
      line-height 41px;
      font-size:15px;
      font-family:PingFangSC-Regular;
      font-weight:400;
      color:#fff;
    }
  }
  .road-box {
    position fixed
    top 0
    left 0
    z-index 999
    background-color #fff
    width 100%
    padding 10px 10px 0
    box-sizing border-box
    .box {
      height calc(100vh - 126px)
      margin-top 10px
    }
    li {
      border-bottom 1px solid #dddddd
      padding 12px 16px
      font-size 14px
    }
    .search-input {
       border 1px solid #999
       width 100%
       .cube-input input {
         text-align left
       }
    }
  }
  .road-select {
    width 200px
    display flex
    align-items center
    i {
      color #999
    }
  }
}
</style>
